{"componentChunkName":"component---src-templates-slide-js","path":"/slides/work/data-flow","matchPath":"/slides/work/data-flow/*","webpackCompilationHash":"c021816e17e59e08b77b","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"id":"ab61d8eb-725c-5c4e-9bac-9019820270e4","body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nfunction Logo() {\n return mdx(\"div\", {\n style: {\n position: \"absolute\",\n left: \"10px\",\n top: \"10px\",\n display: \"flex\",\n alignItems: \"center\"\n }\n }, mdx(\"svg\", {\n width: \"40px\",\n height: \"40px\",\n viewBox: \"0 0 470 470\",\n version: \"1.1\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, mdx(\"g\", {\n stroke: \"none\",\n strokeWidth: \"1\",\n fill: \"none\",\n fillRule: \"evenodd\"\n }, mdx(\"g\", {\n transform: \"translate(-21.000000, -27.000000)\"\n }, mdx(\"g\", {\n transform: \"translate(21.000000, 27.000000)\"\n }, mdx(\"rect\", {\n fill: \"#5E50E4\",\n x: \"0\",\n y: \"0\",\n width: \"470\",\n height: \"470\",\n rx: \"84\"\n }), mdx(\"g\", {\n transform: \"translate(130.000000, 118.000000)\",\n fill: \"#FFFFFF\",\n fillRule: \"nonzero\",\n id: \"\\u5F62\\u72B6\"\n }, mdx(\"path\", {\n d: \"M210,65.2777778 L173.11875,65.2777778 C167.2125,55.0944444 159.075,46.3472222 149.23125,39.6888889 L170.625,18.4083333 L152.11875,0 L123.6375,28.3305556 C117.6,26.8944444 111.43125,26.1111111 105,26.1111111 C98.56875,26.1111111 92.4,26.8944444 86.49375,28.3305556 L57.88125,0 L39.375,18.4083333 L60.6375,39.6888889 C50.925,46.3472222 42.7875,55.0944444 36.88125,65.2777778 L0,65.2777778 L0,91.3888889 L27.43125,91.3888889 C26.775,95.6972222 26.25,100.005556 26.25,104.444444 L26.25,117.5 L0,117.5 L0,143.611111 L26.25,143.611111 L26.25,156.666667 C26.25,161.105556 26.775,165.413889 27.43125,169.722222 L0,169.722222 L0,195.833333 L36.88125,195.833333 C50.53125,219.202778 75.8625,235 105,235 C134.1375,235 159.46875,219.202778 173.11875,195.833333 L210,195.833333 L210,169.722222 L182.56875,169.722222 C183.225,165.413889 183.75,161.105556 183.75,156.666667 L183.75,143.611111 L210,143.611111 L210,117.5 L183.75,117.5 L183.75,104.444444 C183.75,100.005556 183.225,95.6972222 182.56875,91.3888889 L210,91.3888889 L210,65.2777778 Z M157.5,117.5 L157.5,156.666667 C157.5,159.538889 157.10625,162.802778 156.58125,165.805556 L155.26875,174.291667 L150.4125,182.777778 C140.9625,198.966667 123.6375,208.888889 105,208.888889 C86.3625,208.888889 69.0375,198.836111 59.5875,182.777778 L54.73125,174.422222 L53.41875,165.936111 C52.89375,162.933333 52.5,159.669444 52.5,156.666667 L52.5,104.444444 C52.5,101.441667 52.89375,98.1777778 53.41875,95.3055556 L54.73125,86.8194444 L59.5875,78.3333333 C63.525,71.5444444 69.0375,65.6694444 75.46875,61.2305556 L82.95,56.1388889 L92.6625,53.7888889 C96.73125,52.7444444 100.93125,52.2222222 105,52.2222222 C109.2,52.2222222 113.26875,52.7444444 117.46875,53.7888889 L126.39375,55.8777778 L134.4,61.3611111 C140.9625,65.8 146.34375,71.5444444 150.28125,78.4638889 L155.26875,86.95 L156.58125,95.4361111 C157.10625,98.3083333 157.5,101.572222 157.5,104.444444 L157.5,117.5 Z M78.75,143.611111 L131.25,143.611111 L131.25,169.722222 L78.75,169.722222 L78.75,143.611111 Z M78.75,91.3888889 L131.25,91.3888889 L131.25,117.5 L78.75,117.5 L78.75,91.3888889 Z\"\n })))))), mdx(\"div\", {\n style: {\n marginLeft: \"10px\",\n fontSize: \"32px\",\n fontWeight: \"normal\"\n }\n }, \"UBUG\"));\n}\nfunction CopyRight() {\n return mdx(\"div\", {\n style: {\n position: \"absolute\",\n left: \"10px\",\n bottom: \"10px\",\n display: \"flex\",\n alignItems: \"center\"\n }\n }, mdx(\"div\", {\n style: {\n marginLeft: \"10px\",\n fontSize: \"13px\",\n fontWeight: \"normal\"\n }\n }, \"\\xA9 Ubug FE Team. All rights reserved.\"));\n}\nconst _frontmatter = {\n \"slug\": \"data-flow\",\n \"title\": \"用一段烂代码来说数据的流转\",\n \"theme\": \"ms\",\n \"date\": \"2020-10-15 10:36:21\",\n \"published\": true\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n Logo,\n CopyRight,\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"div\", {\n style: {\n textAlign: \"left\"\n }\n }, mdx(\"div\", null, mdx(\"h1\", {\n style: {\n marginBottom: \"10px\"\n }\n }, \"Data Flow\"), mdx(\"div\", {\n style: {\n fontSize: \"1.5em\",\n color: \"#55abed\",\n margin: \"-10px 0 10px\"\n }\n }, \"\\u7528\\u4E00\\u6BB5\\u70C2\\u4EE3\\u7801\\u6765\\u8BF4\\u6570\\u636E\\u7684\\u6D41\\u8F6C\")), mdx(\"div\", {\n style: {\n margin: \"80px 0 0\"\n }\n }, mdx(\"div\", {\n style: {\n fontSize: \".7em\",\n margin: \"10px 0\"\n }\n }, \"\\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB\"), mdx(\"div\", {\n style: {\n fontSize: \".5em\",\n margin: \"10px 0\"\n }\n }, \"\\u524D\\u7AEF\\u9879\\u76EE\\u7EC4 / Ubug\"))), mdx(CopyRight, {\n mdxType: \"CopyRight\"\n }), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h2\", null, \"\\u6570\\u636E\\u6D41\\u8F6C\\uFF1F\"), mdx(\"div\", {\n style: {\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"\\u6570\\u636E\\u7684\\u6D41\\u8F6C\\uFF1F\\u6570\\u636E\\u4E0D\\u662F\\u4ECE\\u540E\\u53F0\\u53D6\\u56DE\\u6765\\u5C55\\u793A\\u5728\\u754C\\u9762\\u4E0A\\u8FD9\\u4E2A\\u7B80\\u5355\\u7684\\u4E8B\\u60C5\\u5417\\uFF1F\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h2\", null, \"\\u73B0\\u4EE3\\u524D\\u7AEF\\u4E0B\\u7684\\u6570\\u636E\"), mdx(\"div\", {\n style: {\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"\\u73B0\\u4EE3\\u524D\\u7AEF\\u5DF2\\u7ECF\\u548C\\u540E\\u53F0\\u89E3\\u8026\\uFF0C\\u540E\\u53F0\\u63D0\\u4F9B Restful \\u6216 Restful-like \\u63A5\\u53E3\\uFF0C\\u6240\\u4EE5\\u524D\\u7AEF\\u9762\\u4E34\\u7684\\u5927\\u90E8\\u5206\\u90FD\\u4E0D\\u662F\\u9AD8\\u5EA6\\u5B9A\\u5236\\u7684\\u805A\\u5408\\u63A5\\u53E3\\u4E86\\u3002\"), mdx(\"div\", {\n style: {\n marginTop: \"50px\",\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"\\u76EE\\u524D\\u524D\\u7AEF\\u4E0E\\u540E\\u7AEF\\u7684\\u4EA4\\u4E92\\u5927\\u90E8\\u5206\\u62FF\\u5230\\u6570\\u636E\\u9700\\u8981\\u81EA\\u5DF1\\u4ECE\\u4E2D\\u62C6\\u5206\\u51FA\\u81EA\\u5DF1\\u9700\\u8981\\u7684\\u90E8\\u5206\\uFF0C\\u8F6C\\u6210\\u6570\\u636E\\u6A21\\u578B\\u3001\\u89C6\\u56FE\\u72B6\\u6001\\u624D\\u80FD\\u663E\\u793A\\u7ED9\\u7528\\u6237\\u770B\\u3002\"), mdx(\"div\", {\n style: {\n marginTop: \"50px\",\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"\\u6240\\u4EE5\\u5173\\u952E\\u662F\\u8FD9\\u4E2A\\u6570\\u636E\\u600E\\u4E48\\u6D41\\u8F6C\\uFF1F\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h2\", null, \"\\u5728\\u6570\\u636E\\u5904\\u7406\\u4E4B\\u524D\\uFF0C\\u601D\\u8003\\u4E0B\\u8FD9\\u51E0\\u4E2A\\u6982\\u5FF5\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u539F\\u751F\\u6570\\u636E\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6570\\u636E\\u6A21\\u578B\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7EC4\\u4EF6\\u72B6\\u6001\")), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h3\", null, \"1. \\u539F\\u751F\\u6570\\u636E\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"\\u4ECE\\u540E\\u53F0\\u53D6\\u6765\\u7684 JSON \\u683C\\u5F0F\\u6570\\u636E\\uFF0C\\u53EF\\u80FD\\u662F\\u805A\\u5408\\u63A5\\u53E3\\u3001Restful\\u3001\\u6CA1\\u6709\\u903B\\u8F91\\u62C6\\u5206\\u3001\\u53EF\\u80FD\\u662F\\u5206\\u9875\\u7684\\u5217\\u8868\\u3001\\u4E5F\\u53EF\\u80FD\\u662F\\u9700\\u8981\\u68C0\\u67E5\\u6821\\u9A8C\\u7684\\u810F\\u6570\\u636E\\uFF0C\\u8FD9\\u4E2A\\u6570\\u636E\\u6709\\u7684\\u80FD\\u76F4\\u63A5\\u7528\\uFF0C\\u6709\\u7684\\u9700\\u8981\\u8FDB\\u884C\\u5904\\u7406\\u3002\"), mdx(\"h3\", null, \"2. \\u6570\\u636E\\u6A21\\u578B\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"\\u539F\\u751F\\u6570\\u636E\\u7ECF\\u8FC7\\u5305\\u88C5\\u3001\\u6821\\u9A8C\\u3001\\u5904\\u7406\\u5F97\\u5230\\u4E00\\u4E2A\\u6570\\u636E\\u6A21\\u578B\\u3002\\u6709\\u7684\\u6570\\u636E\\u6A21\\u578B\\u5E26\\u6709\\u7279\\u522B\\u7684\\u65B9\\u6CD5\\u3001\\u4E8B\\u4EF6\\u673A\\u5236\\u3001\\u4E0D\\u53EF\\u53D8\\u7B49\\uFF0C\\u53EF\\u80FD\\u88AB\\u6574\\u4E2A\\u5E94\\u7528\\u5728\\u591A\\u5904\\u4F7F\\u7528\\u3002\\u66F4\\u591A\\u7684\\u662F\\u8868\\u8FBE\\u4E00\\u4E2A\\u5BF9\\u8C61\\u7684\\u6982\\u5FF5\\u3001\\u6216\\u8005\\u76F8\\u5173\\u6570\\u636E\\u7684\\u805A\\u5408\\uFF0C\\u4E0E\\u89C6\\u56FE\\u65E0\\u5173\\u3002\"), mdx(\"h3\", null, \"3. \\u7EC4\\u4EF6\\u72B6\\u6001\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"`state` \\u6216\\u8005 `props` \\u4E4B\\u7C7B\\u7684\\u6982\\u5FF5\\uFF0C\\u4E0E\\u89C6\\u56FE\\u7EC4\\u4EF6\\u7ED1\\u5B9A\\u7684\\u6570\\u636E\\u6A21\\u578B\\uFF0C\\u4E0E\\u89C6\\u56FE\\u5F3A\\u76F8\\u5173\\u3002\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h2\", null, \"\\u63D2\\u4E00\\u5634\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"1. VUE \\u7684\\u7ED9\\u4EBA\\u7684\\u611F\\u89C9\\u662F\\u201C\\u6A21\\u677F\\u89C6\\u56FE\\u201D\\uFF1A\\u6240\\u4EE5\\u7EC4\\u4EF6\\u72B6\\u6001\\u662F\\u653E\\u5230 state\\u3001computed \\u91CC\\u9762\\uFF0C\\u6F5C\\u5728\\u7684\\u5FC3\\u667A\\u662F\\u201C\\u5148\\u628A\\u6570\\u636E\\u51C6\\u5907\\u597D\\uFF0C\\u6309\\u7167\\u6A21\\u578B\\u8BED\\u6CD5\\u642D\\u5EFA\\u89C6\\u56FE\\u201D\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"2. React \\u7684\\u7ED9\\u4EBA\\u7684\\u611F\\u89C9\\u662F\\u201C\\u51FD\\u6570\\u89C6\\u56FE\\u201D\\uFF1A\\u6240\\u4EE5\\u7EC4\\u4EF6\\u72B6\\u6001\\u6709 state \\u548C props\\uFF0C\\u8BA1\\u7B97\\u53EF\\u4EE5\\u653E\\u5230 render \\u51FD\\u6570\\u91CC\\u9762\\uFF0C\\u6F5C\\u5728\\u7684\\u5FC3\\u667A\\u662F\\u201C\\u5173\\u952E\\u6570\\u636E\\u53D8\\u52A8\\uFF0C\\u80FD\\u591F\\u8BA1\\u7B97\\u7684\\u53EF\\u4EE5\\u653E\\u5230\\u51FD\\u6570\\u91CC\\u201D\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h2\", null, \"\\u6700\\u8FD1\\u770B\\u5230\\u5F88\\u591A\\u4EBA\\u51FA\\u73B0\\u7684\\u4E00\\u4E9B\\u95EE\\u9898\\uFF0C\\u672C\\u8D28\\u4E0A\\u662F\\u4E0D\\u7406\\u89E3\\u6570\\u636E\\u6240\\u8868\\u8FBE\\u7684\\u542B\\u4E49\"), mdx(\"p\", null, \"\\u7B80\\u5316\\u7684\\u4F8B\\u5B50\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const data = await getActivityInviteUsers()\\nfor (let i = 0; i < data.invitedUsers.length; i++) {\\n const user = data.invitedUsers[i]\\n user.statusText = user.isFriend === 1 ? '\\u5DF2\\u7ECF\\u6210\\u4E3A\\u670B\\u53CB' : '\\u6DFB\\u52A0\\u597D\\u53CB'\\n}\\nfor (let i = 0; i < data.waitingUsers.length; i++) {\\n const user = data.waitingUsers[i]\\n user.statusText = user.money === 0 ? '\\u5DF2\\u7ECF\\u9886\\u53D6' : '\\u7B49\\u5F85\\u53D1\\u653E'\\n}\\nconst users = data.invitedUsers.concat(data.waitingUsers)\\ndata.waitingUsers.length = 0\\nfor (let i = 0; i < data.invitedUsers.length; i++) {\\n const user = data.invitedUsers[i]\\n user.statusText = user.status === 0 ? '\\u7B49\\u5F85\\u4E0B\\u5355' : '\\u9080\\u8BF7\\u6210\\u529F'\\n}\\nnew Vue({\\n data: {users},\\n template: '{{user.name}}: {{ user.statusText }}
'\\n})\\n\")), mdx(\"p\", null, \"\\u274C works but bad\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h2\", null, \"\\u4E0A\\u9875\\u7684\\u4EE3\\u7801\\u6709\\u5F88\\u591A\\u95EE\\u9898\\uFF0C\\u5173\\u952E\\u7684\\u95EE\\u9898\\u6709\\uFF1A\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n width: \"800px\"\n }\n }, \"1. \\u6570\\u636E\\u7528\\u5BF9\\u8C61\\u5F15\\u7528\\u76F4\\u63A5\\u539F\\u5730\\u4FEE\\u6539\\u3002\\u83AB\\u540D\\u5176\\u5999\\u7684\\u64CD\\u4F5C\\uFF01\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n width: \"800px\"\n }\n }, \"2. \\u89C6\\u56FE\\u6570\\u636E\\u3001\\u6570\\u636E\\u6A21\\u578B\\u3001\\u6570\\u636E\\u6821\\u9A8C\\u90FD\\u5F88\\u5947\\u602A\\uFF01\\uFF01\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n width: \"800px\"\n }\n }, \"3. \\u6570\\u7EC4\\u64CD\\u4F5C\\u66F4\\u662F\\u4E71\\u4E03\\u516B\\u7CDF\\uFF01\\uFF01\\uFF01\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n width: \"800px\"\n }\n }, \"4. \\u4E00\\u70B9\\u903B\\u8F91\\u6CA1\\u6709\\uFF01\\uFF01\\uFF01\\uFF01\\uFF01\"), mdx(\"p\", null, \"\\u600E\\u4E48\\u4EA7\\u751F\\u7684\\u8FD9\\u6BB5\\u4EE3\\u7801\\uFF1F\\u5F53\\u4E8B\\u4EBA\\u8BF4\\u662F\\u9700\\u6C42\\u591A\\u6B21\\u53D8\\u66F4\\u5BFC\\u81F4\\u903B\\u8F91\\u4E0D\\u505C\\u53E0\\u52A0\\u3002\\u2753\\u2753\\u2753\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h2\", null, \"\\u6B63\\u786E\\u7684\\u64CD\\u4F5C\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n width: \"800px\"\n }\n }, \"1. \\u533A\\u5206\\u6570\\u636E\\u6A21\\u578B\\u548C\\u89C6\\u56FE\\u72B6\\u6001\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n width: \"800px\"\n }\n }, \"2. \\u6BCF\\u4E2A\\u6A21\\u578B\\u7684\\u6784\\u5EFA\\u90FD\\u662F\\u6309\\u9700\\u201C\\u53D6\\u201D\\u7528\\uFF0C\\u8BED\\u4E49\\u660E\\u786E\\u53EF\\u63A8\\u65AD\\uFF0C\\u800C\\u4E0D\\u662F\\u201C\\u62FC\\u201D\\u6570\\u636E\\uFF0C\\u8C03\\u51FA\\u6765\\u6570\\u636E\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n width: \"800px\"\n }\n }, \"3. \\u6570\\u7EC4\\u6709\\u5F88\\u591A\\u7684\\u8F85\\u52A9\\u65B9\\u6CD5\\uFF0C\\u77E5\\u9053\\u6BCF\\u4E2A\\u65B9\\u6CD5\\u548C\\u526F\\u4F5C\\u7528\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n width: \"800px\"\n }\n }, \"4. \\u5199\\u4EE3\\u7801\\u4E4B\\u524D\\u5148\\u5199\\u903B\\u8F91\\uFF0C\\u6539\\u4EE3\\u7801\\u4E4B\\u524D\\u5148\\u6539\\u903B\\u8F91\\uFF0C\\u50BB\\u74DC\\u6CE8\\u91CA\\u5728\\u5173\\u952E\\u5730\\u65B9\\u4E5F\\u4E0D\\u80FD\\u7701\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h2\", null, \"\\u6539\\u6CD5\"), mdx(\"p\", null, \"\\u7B80\\u5316\\u7684\\u4F8B\\u5B50\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const data = await getActivityInviteUsers()\\n\\n// \\u6587\\u6863\\u786E\\u8BA4\\u8FD9\\u4E24\\u4E2A\\u6570\\u636E\\u7ED3\\u6784\\u76F8\\u540C (\\u6790\\u6784\\u64CD\\u4F5C\\u907F\\u514D\\u5F15\\u7528\\u5230\\u539F\\u53D8\\u91CF)\\nconst users = [...data.invitedUsers, ...data.waitingUsers]\\n\\n// \\u5982\\u679C\\u9700\\u8981\\u6570\\u636E\\u6A21\\u578B\\uFF0C\\u6BD4\\u5982\\u6709\\u540E\\u7EED\\u64CD\\u4F5C\\u9700\\u6C42\\u7684\\u60C5\\u51B5\\nclass UserInvitedModel {\\n users\\n constructor(users){\\n this.users.map(/.../)\\n }\\n add(){/*...*/}\\n}\\nconst model = new UserInvitedModel(users)\\n\\n// \\u7528 map \\u4EA7\\u751F\\u65B0\\u7684\\u6570\\u7EC4\\u4F5C\\u4E3A\\u72B6\\u6001\\u89C6\\u56FE\\uFF0C\\u800C\\u4E0D\\u662F\\u539F\\u5730\\u4FEE\\u6539\\uFF0C\\u53EA\\u53D6\\u9700\\u8981\\u7684\\u907F\\u514D\\u8DDF\\u8E2A\\u592A\\u591A\\u5BF9\\u8C61\\nconst invitedUsersState = model.users.sort(timeCompare).map(user => {\\n const { name, status, isFriend, money } = user\\n return { name, status, isFriend, money }\\n})\\n\\n// \\u6570\\u636E\\u662F\\u6570\\u636E\\u3001\\u72B6\\u6001\\u662F\\u72B6\\u6001\\u3001\\u89C6\\u56FE\\u662F\\u89C6\\u56FE\\nnew Vue({\\n data: {invitedUsersState},\\n template: `{{user.name}}: {{ user.status === 0 ? '\\u7B49\\u5F85\\u4E0B\\u5355' : '\\u9080\\u8BF7\\u6210\\u529F' }}
`\\n})\\n\")), mdx(\"p\", null, \"\\u2705 works like a charm\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h3\", null, \"\\u6570\\u636E\\u662F\\u6570\\u636E\\u3001\\u72B6\\u6001\\u662F\\u72B6\\u6001\\u3001\\u89C6\\u56FE\\u662F\\u89C6\\u56FE\"), mdx(\"p\", null, \"\\u8DB3\\u591F\\u6E05\\u6670\\u7684\\u903B\\u8F91\\uFF0C\\u4EE3\\u7801\\u4F1A\\u66F4\\u5BB9\\u6613\\u8BFB\\uFF0C\\u66F4\\u4E0D\\u5BB9\\u6613\\u51FA\\u9519\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h1\", null, \"Thank You\"), mdx(\"div\", {\n style: {\n fontSize: \".5em\"\n }\n }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"), mdx(CopyRight, {\n mdxType: \"CopyRight\"\n }));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"theme":"ms","title":"用一段烂代码来说数据的流转"}}},"pageContext":{"matchPath":"/slides/work/data-flow/*","isCreatedByStatefulCreatePages":false,"fileAbsolutePath":"D:/ubug/storybook/content/slides/work/data-flow.md","id":"ab61d8eb-725c-5c4e-9bac-9019820270e4","parent":{"name":"data-flow","sourceInstanceName":"slides"},"excerpt":"数据流转？ 现代前端下的数据 在数据处理之前，思考下这几个概念： 原生数据 数据模型 组件状态 1. 原生数据 2. 数据模型 3. 组件状态 插一嘴 最近看到很多人出现的一些问题，本质上是不理解数据所表达的含义 简化的例子： ❌ works but bad 上页的代码有很多问题，关键的问题有： 怎么产生的这段代码？当事人说是需求多次变更导致逻辑不停叠加。❓❓❓ 正确的操作 改法 简化的例子： ✅ works like a charm…","fields":{"title":"用一段烂代码来说数据的流转","slug":"/slides/work/data-flow","description":null,"date":"2020-10-15","redirects":null,"datetime":"2020-10-15 10:36:21","categories":[],"series":null,"tags":[],"status":"online"},"frontmatter":{"published":true,"tags":null,"theme":"ms","slug":"data-flow","date":"2020-10-15 10:36:21"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nfunction Logo() {\n return mdx(\"div\", {\n style: {\n position: \"absolute\",\n left: \"10px\",\n top: \"10px\",\n display: \"flex\",\n alignItems: \"center\"\n }\n }, mdx(\"svg\", {\n width: \"40px\",\n height: \"40px\",\n viewBox: \"0 0 470 470\",\n version: \"1.1\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, mdx(\"g\", {\n stroke: \"none\",\n strokeWidth: \"1\",\n fill: \"none\",\n fillRule: \"evenodd\"\n }, mdx(\"g\", {\n transform: \"translate(-21.000000, -27.000000)\"\n }, mdx(\"g\", {\n transform: \"translate(21.000000, 27.000000)\"\n }, mdx(\"rect\", {\n fill: \"#5E50E4\",\n x: \"0\",\n y: \"0\",\n width: \"470\",\n height: \"470\",\n rx: \"84\"\n }), mdx(\"g\", {\n transform: \"translate(130.000000, 118.000000)\",\n fill: \"#FFFFFF\",\n fillRule: \"nonzero\",\n id: \"\\u5F62\\u72B6\"\n }, mdx(\"path\", {\n d: \"M210,65.2777778 L173.11875,65.2777778 C167.2125,55.0944444 159.075,46.3472222 149.23125,39.6888889 L170.625,18.4083333 L152.11875,0 L123.6375,28.3305556 C117.6,26.8944444 111.43125,26.1111111 105,26.1111111 C98.56875,26.1111111 92.4,26.8944444 86.49375,28.3305556 L57.88125,0 L39.375,18.4083333 L60.6375,39.6888889 C50.925,46.3472222 42.7875,55.0944444 36.88125,65.2777778 L0,65.2777778 L0,91.3888889 L27.43125,91.3888889 C26.775,95.6972222 26.25,100.005556 26.25,104.444444 L26.25,117.5 L0,117.5 L0,143.611111 L26.25,143.611111 L26.25,156.666667 C26.25,161.105556 26.775,165.413889 27.43125,169.722222 L0,169.722222 L0,195.833333 L36.88125,195.833333 C50.53125,219.202778 75.8625,235 105,235 C134.1375,235 159.46875,219.202778 173.11875,195.833333 L210,195.833333 L210,169.722222 L182.56875,169.722222 C183.225,165.413889 183.75,161.105556 183.75,156.666667 L183.75,143.611111 L210,143.611111 L210,117.5 L183.75,117.5 L183.75,104.444444 C183.75,100.005556 183.225,95.6972222 182.56875,91.3888889 L210,91.3888889 L210,65.2777778 Z M157.5,117.5 L157.5,156.666667 C157.5,159.538889 157.10625,162.802778 156.58125,165.805556 L155.26875,174.291667 L150.4125,182.777778 C140.9625,198.966667 123.6375,208.888889 105,208.888889 C86.3625,208.888889 69.0375,198.836111 59.5875,182.777778 L54.73125,174.422222 L53.41875,165.936111 C52.89375,162.933333 52.5,159.669444 52.5,156.666667 L52.5,104.444444 C52.5,101.441667 52.89375,98.1777778 53.41875,95.3055556 L54.73125,86.8194444 L59.5875,78.3333333 C63.525,71.5444444 69.0375,65.6694444 75.46875,61.2305556 L82.95,56.1388889 L92.6625,53.7888889 C96.73125,52.7444444 100.93125,52.2222222 105,52.2222222 C109.2,52.2222222 113.26875,52.7444444 117.46875,53.7888889 L126.39375,55.8777778 L134.4,61.3611111 C140.9625,65.8 146.34375,71.5444444 150.28125,78.4638889 L155.26875,86.95 L156.58125,95.4361111 C157.10625,98.3083333 157.5,101.572222 157.5,104.444444 L157.5,117.5 Z M78.75,143.611111 L131.25,143.611111 L131.25,169.722222 L78.75,169.722222 L78.75,143.611111 Z M78.75,91.3888889 L131.25,91.3888889 L131.25,117.5 L78.75,117.5 L78.75,91.3888889 Z\"\n })))))), mdx(\"div\", {\n style: {\n marginLeft: \"10px\",\n fontSize: \"32px\",\n fontWeight: \"normal\"\n }\n }, \"UBUG\"));\n}\nfunction CopyRight() {\n return mdx(\"div\", {\n style: {\n position: \"absolute\",\n left: \"10px\",\n bottom: \"10px\",\n display: \"flex\",\n alignItems: \"center\"\n }\n }, mdx(\"div\", {\n style: {\n marginLeft: \"10px\",\n fontSize: \"13px\",\n fontWeight: \"normal\"\n }\n }, \"\\xA9 Ubug FE Team. All rights reserved.\"));\n}\nconst _frontmatter = {\n \"slug\": \"data-flow\",\n \"title\": \"用一段烂代码来说数据的流转\",\n \"theme\": \"ms\",\n \"date\": \"2020-10-15 10:36:21\",\n \"published\": true\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n Logo,\n CopyRight,\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"div\", {\n style: {\n textAlign: \"left\"\n }\n }, mdx(\"div\", null, mdx(\"h1\", {\n style: {\n marginBottom: \"10px\"\n }\n }, \"Data Flow\"), mdx(\"div\", {\n style: {\n fontSize: \"1.5em\",\n color: \"#55abed\",\n margin: \"-10px 0 10px\"\n }\n }, \"\\u7528\\u4E00\\u6BB5\\u70C2\\u4EE3\\u7801\\u6765\\u8BF4\\u6570\\u636E\\u7684\\u6D41\\u8F6C\")), mdx(\"div\", {\n style: {\n margin: \"80px 0 0\"\n }\n }, mdx(\"div\", {\n style: {\n fontSize: \".7em\",\n margin: \"10px 0\"\n }\n }, \"\\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB\"), mdx(\"div\", {\n style: {\n fontSize: \".5em\",\n margin: \"10px 0\"\n }\n }, \"\\u524D\\u7AEF\\u9879\\u76EE\\u7EC4 / Ubug\"))), mdx(CopyRight, {\n mdxType: \"CopyRight\"\n }), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h2\", null, \"\\u6570\\u636E\\u6D41\\u8F6C\\uFF1F\"), mdx(\"div\", {\n style: {\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"\\u6570\\u636E\\u7684\\u6D41\\u8F6C\\uFF1F\\u6570\\u636E\\u4E0D\\u662F\\u4ECE\\u540E\\u53F0\\u53D6\\u56DE\\u6765\\u5C55\\u793A\\u5728\\u754C\\u9762\\u4E0A\\u8FD9\\u4E2A\\u7B80\\u5355\\u7684\\u4E8B\\u60C5\\u5417\\uFF1F\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h2\", null, \"\\u73B0\\u4EE3\\u524D\\u7AEF\\u4E0B\\u7684\\u6570\\u636E\"), mdx(\"div\", {\n style: {\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"\\u73B0\\u4EE3\\u524D\\u7AEF\\u5DF2\\u7ECF\\u548C\\u540E\\u53F0\\u89E3\\u8026\\uFF0C\\u540E\\u53F0\\u63D0\\u4F9B Restful \\u6216 Restful-like \\u63A5\\u53E3\\uFF0C\\u6240\\u4EE5\\u524D\\u7AEF\\u9762\\u4E34\\u7684\\u5927\\u90E8\\u5206\\u90FD\\u4E0D\\u662F\\u9AD8\\u5EA6\\u5B9A\\u5236\\u7684\\u805A\\u5408\\u63A5\\u53E3\\u4E86\\u3002\"), mdx(\"div\", {\n style: {\n marginTop: \"50px\",\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"\\u76EE\\u524D\\u524D\\u7AEF\\u4E0E\\u540E\\u7AEF\\u7684\\u4EA4\\u4E92\\u5927\\u90E8\\u5206\\u62FF\\u5230\\u6570\\u636E\\u9700\\u8981\\u81EA\\u5DF1\\u4ECE\\u4E2D\\u62C6\\u5206\\u51FA\\u81EA\\u5DF1\\u9700\\u8981\\u7684\\u90E8\\u5206\\uFF0C\\u8F6C\\u6210\\u6570\\u636E\\u6A21\\u578B\\u3001\\u89C6\\u56FE\\u72B6\\u6001\\u624D\\u80FD\\u663E\\u793A\\u7ED9\\u7528\\u6237\\u770B\\u3002\"), mdx(\"div\", {\n style: {\n marginTop: \"50px\",\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"\\u6240\\u4EE5\\u5173\\u952E\\u662F\\u8FD9\\u4E2A\\u6570\\u636E\\u600E\\u4E48\\u6D41\\u8F6C\\uFF1F\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h2\", null, \"\\u5728\\u6570\\u636E\\u5904\\u7406\\u4E4B\\u524D\\uFF0C\\u601D\\u8003\\u4E0B\\u8FD9\\u51E0\\u4E2A\\u6982\\u5FF5\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u539F\\u751F\\u6570\\u636E\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6570\\u636E\\u6A21\\u578B\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7EC4\\u4EF6\\u72B6\\u6001\")), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h3\", null, \"1. \\u539F\\u751F\\u6570\\u636E\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"\\u4ECE\\u540E\\u53F0\\u53D6\\u6765\\u7684 JSON \\u683C\\u5F0F\\u6570\\u636E\\uFF0C\\u53EF\\u80FD\\u662F\\u805A\\u5408\\u63A5\\u53E3\\u3001Restful\\u3001\\u6CA1\\u6709\\u903B\\u8F91\\u62C6\\u5206\\u3001\\u53EF\\u80FD\\u662F\\u5206\\u9875\\u7684\\u5217\\u8868\\u3001\\u4E5F\\u53EF\\u80FD\\u662F\\u9700\\u8981\\u68C0\\u67E5\\u6821\\u9A8C\\u7684\\u810F\\u6570\\u636E\\uFF0C\\u8FD9\\u4E2A\\u6570\\u636E\\u6709\\u7684\\u80FD\\u76F4\\u63A5\\u7528\\uFF0C\\u6709\\u7684\\u9700\\u8981\\u8FDB\\u884C\\u5904\\u7406\\u3002\"), mdx(\"h3\", null, \"2. \\u6570\\u636E\\u6A21\\u578B\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"\\u539F\\u751F\\u6570\\u636E\\u7ECF\\u8FC7\\u5305\\u88C5\\u3001\\u6821\\u9A8C\\u3001\\u5904\\u7406\\u5F97\\u5230\\u4E00\\u4E2A\\u6570\\u636E\\u6A21\\u578B\\u3002\\u6709\\u7684\\u6570\\u636E\\u6A21\\u578B\\u5E26\\u6709\\u7279\\u522B\\u7684\\u65B9\\u6CD5\\u3001\\u4E8B\\u4EF6\\u673A\\u5236\\u3001\\u4E0D\\u53EF\\u53D8\\u7B49\\uFF0C\\u53EF\\u80FD\\u88AB\\u6574\\u4E2A\\u5E94\\u7528\\u5728\\u591A\\u5904\\u4F7F\\u7528\\u3002\\u66F4\\u591A\\u7684\\u662F\\u8868\\u8FBE\\u4E00\\u4E2A\\u5BF9\\u8C61\\u7684\\u6982\\u5FF5\\u3001\\u6216\\u8005\\u76F8\\u5173\\u6570\\u636E\\u7684\\u805A\\u5408\\uFF0C\\u4E0E\\u89C6\\u56FE\\u65E0\\u5173\\u3002\"), mdx(\"h3\", null, \"3. \\u7EC4\\u4EF6\\u72B6\\u6001\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"`state` \\u6216\\u8005 `props` \\u4E4B\\u7C7B\\u7684\\u6982\\u5FF5\\uFF0C\\u4E0E\\u89C6\\u56FE\\u7EC4\\u4EF6\\u7ED1\\u5B9A\\u7684\\u6570\\u636E\\u6A21\\u578B\\uFF0C\\u4E0E\\u89C6\\u56FE\\u5F3A\\u76F8\\u5173\\u3002\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h2\", null, \"\\u63D2\\u4E00\\u5634\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"1. VUE \\u7684\\u7ED9\\u4EBA\\u7684\\u611F\\u89C9\\u662F\\u201C\\u6A21\\u677F\\u89C6\\u56FE\\u201D\\uFF1A\\u6240\\u4EE5\\u7EC4\\u4EF6\\u72B6\\u6001\\u662F\\u653E\\u5230 state\\u3001computed \\u91CC\\u9762\\uFF0C\\u6F5C\\u5728\\u7684\\u5FC3\\u667A\\u662F\\u201C\\u5148\\u628A\\u6570\\u636E\\u51C6\\u5907\\u597D\\uFF0C\\u6309\\u7167\\u6A21\\u578B\\u8BED\\u6CD5\\u642D\\u5EFA\\u89C6\\u56FE\\u201D\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n maxWidth: \"1000px\"\n }\n }, \"2. React \\u7684\\u7ED9\\u4EBA\\u7684\\u611F\\u89C9\\u662F\\u201C\\u51FD\\u6570\\u89C6\\u56FE\\u201D\\uFF1A\\u6240\\u4EE5\\u7EC4\\u4EF6\\u72B6\\u6001\\u6709 state \\u548C props\\uFF0C\\u8BA1\\u7B97\\u53EF\\u4EE5\\u653E\\u5230 render \\u51FD\\u6570\\u91CC\\u9762\\uFF0C\\u6F5C\\u5728\\u7684\\u5FC3\\u667A\\u662F\\u201C\\u5173\\u952E\\u6570\\u636E\\u53D8\\u52A8\\uFF0C\\u80FD\\u591F\\u8BA1\\u7B97\\u7684\\u53EF\\u4EE5\\u653E\\u5230\\u51FD\\u6570\\u91CC\\u201D\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h2\", null, \"\\u6700\\u8FD1\\u770B\\u5230\\u5F88\\u591A\\u4EBA\\u51FA\\u73B0\\u7684\\u4E00\\u4E9B\\u95EE\\u9898\\uFF0C\\u672C\\u8D28\\u4E0A\\u662F\\u4E0D\\u7406\\u89E3\\u6570\\u636E\\u6240\\u8868\\u8FBE\\u7684\\u542B\\u4E49\"), mdx(\"p\", null, \"\\u7B80\\u5316\\u7684\\u4F8B\\u5B50\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const data = await getActivityInviteUsers()\\nfor (let i = 0; i < data.invitedUsers.length; i++) {\\n const user = data.invitedUsers[i]\\n user.statusText = user.isFriend === 1 ? '\\u5DF2\\u7ECF\\u6210\\u4E3A\\u670B\\u53CB' : '\\u6DFB\\u52A0\\u597D\\u53CB'\\n}\\nfor (let i = 0; i < data.waitingUsers.length; i++) {\\n const user = data.waitingUsers[i]\\n user.statusText = user.money === 0 ? '\\u5DF2\\u7ECF\\u9886\\u53D6' : '\\u7B49\\u5F85\\u53D1\\u653E'\\n}\\nconst users = data.invitedUsers.concat(data.waitingUsers)\\ndata.waitingUsers.length = 0\\nfor (let i = 0; i < data.invitedUsers.length; i++) {\\n const user = data.invitedUsers[i]\\n user.statusText = user.status === 0 ? '\\u7B49\\u5F85\\u4E0B\\u5355' : '\\u9080\\u8BF7\\u6210\\u529F'\\n}\\nnew Vue({\\n data: {users},\\n template: '{{user.name}}: {{ user.statusText }}
'\\n})\\n\")), mdx(\"p\", null, \"\\u274C works but bad\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h2\", null, \"\\u4E0A\\u9875\\u7684\\u4EE3\\u7801\\u6709\\u5F88\\u591A\\u95EE\\u9898\\uFF0C\\u5173\\u952E\\u7684\\u95EE\\u9898\\u6709\\uFF1A\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n width: \"800px\"\n }\n }, \"1. \\u6570\\u636E\\u7528\\u5BF9\\u8C61\\u5F15\\u7528\\u76F4\\u63A5\\u539F\\u5730\\u4FEE\\u6539\\u3002\\u83AB\\u540D\\u5176\\u5999\\u7684\\u64CD\\u4F5C\\uFF01\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n width: \"800px\"\n }\n }, \"2. \\u89C6\\u56FE\\u6570\\u636E\\u3001\\u6570\\u636E\\u6A21\\u578B\\u3001\\u6570\\u636E\\u6821\\u9A8C\\u90FD\\u5F88\\u5947\\u602A\\uFF01\\uFF01\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n width: \"800px\"\n }\n }, \"3. \\u6570\\u7EC4\\u64CD\\u4F5C\\u66F4\\u662F\\u4E71\\u4E03\\u516B\\u7CDF\\uFF01\\uFF01\\uFF01\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n width: \"800px\"\n }\n }, \"4. \\u4E00\\u70B9\\u903B\\u8F91\\u6CA1\\u6709\\uFF01\\uFF01\\uFF01\\uFF01\\uFF01\"), mdx(\"p\", null, \"\\u600E\\u4E48\\u4EA7\\u751F\\u7684\\u8FD9\\u6BB5\\u4EE3\\u7801\\uFF1F\\u5F53\\u4E8B\\u4EBA\\u8BF4\\u662F\\u9700\\u6C42\\u591A\\u6B21\\u53D8\\u66F4\\u5BFC\\u81F4\\u903B\\u8F91\\u4E0D\\u505C\\u53E0\\u52A0\\u3002\\u2753\\u2753\\u2753\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h2\", null, \"\\u6B63\\u786E\\u7684\\u64CD\\u4F5C\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n width: \"800px\"\n }\n }, \"1. \\u533A\\u5206\\u6570\\u636E\\u6A21\\u578B\\u548C\\u89C6\\u56FE\\u72B6\\u6001\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n width: \"800px\"\n }\n }, \"2. \\u6BCF\\u4E2A\\u6A21\\u578B\\u7684\\u6784\\u5EFA\\u90FD\\u662F\\u6309\\u9700\\u201C\\u53D6\\u201D\\u7528\\uFF0C\\u8BED\\u4E49\\u660E\\u786E\\u53EF\\u63A8\\u65AD\\uFF0C\\u800C\\u4E0D\\u662F\\u201C\\u62FC\\u201D\\u6570\\u636E\\uFF0C\\u8C03\\u51FA\\u6765\\u6570\\u636E\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n width: \"800px\"\n }\n }, \"3. \\u6570\\u7EC4\\u6709\\u5F88\\u591A\\u7684\\u8F85\\u52A9\\u65B9\\u6CD5\\uFF0C\\u77E5\\u9053\\u6BCF\\u4E2A\\u65B9\\u6CD5\\u548C\\u526F\\u4F5C\\u7528\"), mdx(\"div\", {\n style: {\n marginBottom: \"50px\",\n textAlign: \"left\",\n width: \"800px\"\n }\n }, \"4. \\u5199\\u4EE3\\u7801\\u4E4B\\u524D\\u5148\\u5199\\u903B\\u8F91\\uFF0C\\u6539\\u4EE3\\u7801\\u4E4B\\u524D\\u5148\\u6539\\u903B\\u8F91\\uFF0C\\u50BB\\u74DC\\u6CE8\\u91CA\\u5728\\u5173\\u952E\\u5730\\u65B9\\u4E5F\\u4E0D\\u80FD\\u7701\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h2\", null, \"\\u6539\\u6CD5\"), mdx(\"p\", null, \"\\u7B80\\u5316\\u7684\\u4F8B\\u5B50\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const data = await getActivityInviteUsers()\\n\\n// \\u6587\\u6863\\u786E\\u8BA4\\u8FD9\\u4E24\\u4E2A\\u6570\\u636E\\u7ED3\\u6784\\u76F8\\u540C (\\u6790\\u6784\\u64CD\\u4F5C\\u907F\\u514D\\u5F15\\u7528\\u5230\\u539F\\u53D8\\u91CF)\\nconst users = [...data.invitedUsers, ...data.waitingUsers]\\n\\n// \\u5982\\u679C\\u9700\\u8981\\u6570\\u636E\\u6A21\\u578B\\uFF0C\\u6BD4\\u5982\\u6709\\u540E\\u7EED\\u64CD\\u4F5C\\u9700\\u6C42\\u7684\\u60C5\\u51B5\\nclass UserInvitedModel {\\n users\\n constructor(users){\\n this.users.map(/.../)\\n }\\n add(){/*...*/}\\n}\\nconst model = new UserInvitedModel(users)\\n\\n// \\u7528 map \\u4EA7\\u751F\\u65B0\\u7684\\u6570\\u7EC4\\u4F5C\\u4E3A\\u72B6\\u6001\\u89C6\\u56FE\\uFF0C\\u800C\\u4E0D\\u662F\\u539F\\u5730\\u4FEE\\u6539\\uFF0C\\u53EA\\u53D6\\u9700\\u8981\\u7684\\u907F\\u514D\\u8DDF\\u8E2A\\u592A\\u591A\\u5BF9\\u8C61\\nconst invitedUsersState = model.users.sort(timeCompare).map(user => {\\n const { name, status, isFriend, money } = user\\n return { name, status, isFriend, money }\\n})\\n\\n// \\u6570\\u636E\\u662F\\u6570\\u636E\\u3001\\u72B6\\u6001\\u662F\\u72B6\\u6001\\u3001\\u89C6\\u56FE\\u662F\\u89C6\\u56FE\\nnew Vue({\\n data: {invitedUsersState},\\n template: `{{user.name}}: {{ user.status === 0 ? '\\u7B49\\u5F85\\u4E0B\\u5355' : '\\u9080\\u8BF7\\u6210\\u529F' }}
`\\n})\\n\")), mdx(\"p\", null, \"\\u2705 works like a charm\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h3\", null, \"\\u6570\\u636E\\u662F\\u6570\\u636E\\u3001\\u72B6\\u6001\\u662F\\u72B6\\u6001\\u3001\\u89C6\\u56FE\\u662F\\u89C6\\u56FE\"), mdx(\"p\", null, \"\\u8DB3\\u591F\\u6E05\\u6670\\u7684\\u903B\\u8F91\\uFF0C\\u4EE3\\u7801\\u4F1A\\u66F4\\u5BB9\\u6613\\u8BFB\\uFF0C\\u66F4\\u4E0D\\u5BB9\\u6613\\u51FA\\u9519\"), mdx(\"hr\", null), mdx(Logo, {\n mdxType: \"Logo\"\n }), mdx(\"h1\", null, \"Thank You\"), mdx(\"div\", {\n style: {\n fontSize: \".5em\"\n }\n }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"), mdx(CopyRight, {\n mdxType: \"CopyRight\"\n }));\n}\n;\nMDXContent.isMDXComponent = true;","slug":"/slides/work/data-flow"}}}